<template>
    <div class="finished-tasks" v-if="finishedTasks.length > 0">
        <div class="finished-task-title" @click="handleExpand">
            <img src="@/assets/img/icon/down.svg" alt="" v-if="isExpand" />
            <img src="@/assets/img/icon/right.svg" alt="" v-else />
            <span>已完成</span>
        </div>
        <div class="finished-task" v-for="item in finishedTasks" :key="item.id" v-show="isExpand">
            <div>
                <img src="@/assets/img/icon/circle_ok.svg" alt="" />
                <del>{{ item.value }}</del>
            </div>
            <img src="@/assets/img/icon/star.svg" alt="" />
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            isExpand: false,
            finishedTasks: [
                {
                    id: 1,
                    value: "已完成的任务一！",
                },
                {
                    id: 2,
                    value: "已完成的任务二！",
                },
            ],
        };
    },
    methods: {
        handleExpand () {
            this.isExpand = !this.isExpand;
        },
    },
};
</script>

<style lang="scss" scoped>
.finished-tasks {
    font-size: 1.1rem;

    .finished-task-title {
        padding: 14px 5px;
        display: flex;
        border-bottom: 1px solid #e5e5e5;
        color: black;
        cursor: pointer;
        user-select: none;

        img {
            width: 1.5rem;
            margin-right: 10px;
        }
    }

    .finished-task {
        padding: 14px 25px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e5e5e5;

        &:hover {
            cursor: pointer;
            background-color: rgba(221, 221, 221, 0.5);
        }

        div {
            display: flex;
            align-items: center;

            img {
                width: 1.2rem;
                margin-right: 10px;

                &:hover {
                    width: 1.2rem;
                    content: url("../../../assets/img/icon/circle_ok.svg");
                }
            }

            del {
                font-size: 1.1rem;
                color: rgba(0, 0, 0, 0.5);
            }
        }

        img {
            width: 1.5rem;

            &:hover {
                content: url("../../../assets/img/icon/star_hover.svg");
            }
        }
    }

    // .finished-task:last-of-type {
    //   border-bottom: none;
    // }
}
</style>
